<template>
    <!-- 选择框 -->
    <PopList :title="'建筑'">
        <div class="roam_moveOnLineMode">
            <div>
                <label for="">连续创建</label><span class="roam_moveOnLineMode_checke"
                    :class="{ 'roam_moveOnLineMode_checke_active': continuousCreate }" @click="changeCheckBox">
                    <es-icon :name="continuousCreate ? 'duigou' : ''" :color="'white'" :size="12" />
                </span>
            </div>
        </div>
        <div class="images_img_list">
            <div v-for="(item, index) in modes" class="images_img_lilist">
                <div class="images_imgposition" @click="select(item)"
                    :class="{ 'images_checkedactive': selected && item.type === selected.type }">
                    <img :src="item.img" alt="">
                    <span v-show="iconIsShow == index ? true : false">{{ item.name ?? '模式' }}</span>
                </div>
                <div class="images_onlineimageName" @mouseenter="iconIsShow = index" @mouseleave="iconIsShow = null">{{
        item.name ?? '模式' }}</div>
            </div>
        </div>
    </PopList>
</template>

<script setup lang="ts">
import { ESGltfModel } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";
import { ref, onBeforeUnmount, onMounted, inject } from "vue";
import PopList from "../../../components/PopList.vue";
import { createSceneObjTreeItemFromJson, executePos } from "./fun";
import { XbsjEarthUi } from "../../../scripts/xbsjEarthUi";
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi
const modes = [//多选模式类型
    {
        type: '${esobjs-xe2-plugin-assets-script-dir}/xe2-assets/esobjs-xe2-plugin/glbs/build_worker/building.glb',
        img: require('../../../assets/plotting/building.png'),
        name: '大楼'
    },
    {
        type: '${esobjs-xe2-plugin-assets-script-dir}/xe2-assets/esobjs-xe2-plugin/glbs/plotting/jiankongqi.glb',
        img: require('../../../assets/plotting/monitor.png'),
        name: '监控探头'
    },
    {
        type: '${esobjs-xe2-plugin-assets-script-dir}/xe2-assets/esobjs-xe2-plugin/glbs/plotting/denggan.glb',
        img: require('../../../assets/plotting/streetLight.png'),
        name: '路灯'
    },
    {
        type: '${esobjs-xe2-plugin-assets-script-dir}/xe2-assets/esobjs-xe2-plugin/glbs/plotting/fenxianxiang.glb',
        img: require('../../../assets/plotting/switchBox.png'),
        name: '配电箱'
    },
    {
        type: '${esobjs-xe2-plugin-assets-script-dir}/xe2-assets/esobjs-xe2-plugin/glbs/plotting/xiangan.glb',
        img: require('../../../assets/plotting/wire.png'),
        name: '线杆'
    },
]
const iconIsShow: any = ref()
const continuousCreate = ref(false)//连续创建
const selected: any = ref(modes[0])
const flag = ref(false)
let sceneObject: ESGltfModel | undefined = undefined
const pos = (position: [number, number, number]) => {
    flag.value = true
    if (!selected.value) return
    if (!continuousCreate.value) return
    flag.value = false
    createSceneObject(position)
}
const changeCheckBox = () => {//点击取消连续创建时使得建筑类型为空
    if (sceneObject) {
        sceneObject.editing = false
    }
    if (continuousCreate.value) {
        selected.value = undefined
    }
    continuousCreate.value = !continuousCreate.value
    flag.value = false
}
const select = (item: { type: string, img: any, name: string, }) => {//点击选择框中的建筑按钮
    selected.value = item
    if (continuousCreate.value) return
    createOneSceneObject()
}
//创建建筑场景对象
const createSceneObject = (position: [number, number, number]) => {
    if (!selected.value) return
    const obj = xbsjEarthUi.createSceneObject(ESGltfModel) as ESGltfModel
    obj.position = position
    obj.url = selected.value.type
    obj.name = selected.value.name
    //编辑状态结束后根据json创建在场景树上
    obj.editing = true
    obj.d(obj.editingChanged.disposableOnce(() => {
        if (obj.editing === false) {
            const json = JSON.parse(obj.jsonStr)
            xbsjEarthUi.destroySceneObject(obj)
            createSceneObjTreeItemFromJson(xbsjEarthUi, json)
        }
    }))
}
//创建单个报警场景对象
const createOneSceneObject = () => {
    if (!selected.value) return
    const obj2 = xbsjEarthUi.createSceneObject(ESGltfModel) as ESGltfModel
    obj2.url = selected.value.type
    obj2.name = selected.value.name
    //编辑状态结束后根据json创建在场景树上
    obj2.editing = true
    sceneObject = obj2
    sceneObject.d(sceneObject.editingChanged.disposableWeakOn(() => {
        if (sceneObject && sceneObject.editing === false) {
            const json = JSON.parse(sceneObject.jsonStr)
            const position = sceneObject.position
            const a = position[0] === 0 && position[1] === 0
            xbsjEarthUi.destroySceneObject(sceneObject)
            sceneObject = undefined
            setTimeout(() => {
                if (!a && flag.value) {
                    createSceneObjTreeItemFromJson(xbsjEarthUi, json)
                    flag.value = false
                    selected.value = undefined
                }
            }, 100)
        }
    }))
}
onMounted(() => {
    createOneSceneObject()
    const disposes = executePos(xbsjEarthUi, pos)
    onBeforeUnmount(() => {
        if (disposes) {
            disposes.forEach((item) => {
                item && item()
            })
        }
        // if (disposes) {
        //     disposes()
        // }
    })
})
</script>
